<template>
    <div class="openad">
        <el-image style="width: 100%; height: 100%" :src="getImage" fit="cover">
            <div slot="error" class="image-error muted flex row-center">
                <i class="el-icon-picture font-size-40"></i>
            </div>
        </el-image>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
@Component
export default class Contents extends Vue {
    @Prop() content!: any
    @Prop() styles!: any

    get getImage() {
        const { data } = this.content
        if (Array.isArray(data)) {
            return data[0] ? data[0].url : ''
        }
        return ''
    }
}
</script>

<style lang="scss" scoped>
.openad {
    width: 100%;
    height: 100%;
}
</style>
